<template>
  <div class="app-container">
    <div class="filter-container"/>
    <div class="filter-container">
      <el-button
        v-if="transBtn"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新增银行卡
      </el-button>
    </div>

    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>个人中心</span>
        <el-button
          v-if="transBtn"
          style="float: right;"
          type="primary"
          icon="el-icon-refresh"
          @click="handleTrans"
        >转账
        </el-button>
      </div>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="基本信息"
          name="first"
        >
          <div>
            <el-row>
              <el-col :span="8">
                <div class="grid-content ">
                  名称：{{ info.name }}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content ">
                  手机号：{{ info.phone }}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content ">
                  钱包余额：{{ currentMoney }}
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <div class="grid-content ">
                  创建时间：{{ info.created }}
                </div>
              </el-col>
              <!--<el-col :span="8">-->
              <!--<div class="grid-content ">-->
              <!--角色：{{ info.role | roleFilter }}-->
              <!--</div>-->
              <!--</el-col>-->
              <el-col :span="8">
                <!-- <div class="grid-content ">
                  钱包余额：{{ info.currentMoney }}
                </div> -->
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="登录密码"
          name="second"
        >
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            style="width:400px;margin-top: 20px;"
          >
            <el-form-item
              label="当前登录密码"
              prop="oldPassword"
            >
              <el-input
                v-model="ruleForm.oldPassword"
                type="password"
              />
            </el-form-item>
            <el-form-item
              label="新登录密码"
              prop="oldPassword"
            >
              <el-input
                v-model="ruleForm.newPassword "
                type="password"
              />
            </el-form-item>
            <el-form-item
              label="新登录密码"
              prop="newPassword2"
            >
              <el-input
                v-model="ruleForm.newPassword2 "
                type="password"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit('ruleForm')"
              >立即重置
              </el-button>
            </el-form-item>
          </el-form>
          <el-alert
            title="温馨提示：如果您没有设置过密码，默认密码为123456！"
            type="info"
            :closable="false"
          />
        </el-tab-pane>
        <!-- <el-tab-pane
          v-if="isAgentSub"
          label="提现密码"
          name="third"
        >
          <el-form
            ref="payForm"
            :model="payForm"
            label-width="120px"
            :rules="rules"
            style="width:400px;margin-top: 20px;"
          >
            <el-form-item
              label="当前提现密码"
              prop="oldPassword"
            >
              <el-input
                v-model="payForm.oldPassword"
                type="password"
                maxlength="6"
              />
            </el-form-item>
            <el-form-item
              label="新提现密码"
              prop="newPassword"
            >
              <el-input
                v-model="payForm.newPassword"
                type="password"
                maxlength="6"
              />
            </el-form-item>
            <el-form-item
              label="新提现密码"
              prop="newPassword2"
              maxlength="6"
            >
              <el-input
                v-model="payForm.newPassword2"
                type="password"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit2('payForm')"
              >立即重置
              </el-button>
            </el-form-item>
          </el-form>
          <el-alert
            title="温馨提示：如果您没有设置过密码，默认密码为123456！"
            type="info"
            :closable="false"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="transBtn"
          label="转账记录"
          name="four"
        >
          <div>
            <el-table
              :key="key"
              :data="walletDate"
              border
              fit
              highlight-current-row
              style="width: 100%;"
            >
              <el-table-column
                label="序号"
                prop="id"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="payName"
                label="支方名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="payPhone"
                label="支方电话"
                align="center"
                width=""
              />
              <el-table-column
                prop="receiveName"
                label="收方名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="receivePhone"
                label="收方电话"
                align="center"
                width=""
              />
              <el-table-column
                prop="created"
                label="时间"
                align="center"
                width=""
              />

              <el-table-column
                prop="moeny"
                label="金额"
                align="center"
                width=""
              >
                <template slot-scope="scope">
                  {{ scope.row.type | walletTradeFilter }}{{scope.row.moeny}}
                </template>
              </el-table-column>
              <el-table-column
                prop="remark"
                label="描述"
                align="center"
                width=""
              />
            </el-table>
          </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getWalletTradeList"
          />

        </el-tab-pane>
        <el-tab-pane
          v-if="transBtn"
          label="银行卡信息"
          name="five"
        >
          <div
            slot="header"
            class="clearfix"
          >
            <el-button
              style="float: right;"
              type="primary"
              icon="el-icon-edit"
              @click="handleCreate"
            >新增银行卡
            </el-button>
          </div>
          <div>
            <el-table
              :key="key"
              :data="tableData"
              border
              fit
              highlight-current-row
              style="width: 100%;"
            >
              <el-table-column
                label="序号"
                prop="id"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="openName"
                label="银行卡姓名"
                align="center"
                width=""
              />
              <el
              <el-table-column
                prop="cardNum"
                label="银行卡帐号"
                align="center"
                width=""
              />

              <el-table-column
                prop="idCardNum"
                label="银行卡身份证"
                align="center"
                width=""
              />
              <el-table-column
                prop="created"
                label="创建时间"
                align="center"
                width=""
              />


              <el
              <el-table-column
                prop="openBank"
                label="所属银行"
                align="center"
                width=""
              />

              <el-table-column
                label="操作"
                align="center"
                width=""
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    size="mini"
                    @click="delBankCard(scope.row)"
                  >删除
                  </el-button>

                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleGetMoney(scope.row)"
                  >提现
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </div>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>

    <el-dialog
      title="转账"
      :visible.sync="dialogFormMoney"
      top="2vh"
      width="600px"
    >
      <el-form
        ref="temp1"
        :rules="rules"
        :model="temp1"
        label-position="left"
        label-width="100px"
        style="width: 500px; margin-left:50px;"
        class="demo-dynamic"
        :inline="true"
      >

        <!-- <el-form-item
          label="省代"
          prop=""

        >
          <el-select
            v-model="temp1.agentId"
            class="filter-item"
          >
            <el-option
              v-for="item in allAgent"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item
          label="商户"
          prop="oilSupplyId"
        >
          <el-select
            v-model="temp1.oilSupplyId"
            placeholder="请选择商户"
            class="filter-item"
            clearable
          >
            <el-option
              v-for="item in supply"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="转账金额"
          prop="money"
        >
          <el-input
            v-model="temp1.money"
            clearable
          />
        </el-form-item>

        <el-form-item
          label="提现密码"
          prop="password"
        >
          <el-input
            v-model="temp1.password"
            type="password"
            clearable
          />
        </el-form-item>

        <!-- <el-form-item
          label="验证码"
          prop="code"
        >
          <el-input
            v-model="temp1.code"
            clearable
            style="width:170px"
          />
          <el-button
            type="primary"
            size="mini"
            @click="getCode()"
          >获取验证码</el-button>
        </el-form-item> -->

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormMoney = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="trans()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      top="2vh"
      width="550px"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item
          label="开户人姓名"
          prop="openName"
        >
          <el-input v-model="temp.openName"/>
        </el-form-item>
        <el-form-item
          label="身份证号码"
          prop="idCardNum"
        >
          <el-input v-model="temp.idCardNum"/>
        </el-form-item>

        <el-form-item
          label="银行卡号码"
          prop="cardNum"
        >
          <el-input v-model="temp.cardNum"/>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus==='create'?createData():updateData()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="提现"
      :visible.sync="dialogFormMoneyTX"
      top="2vh"
      width="600px"
    >
      <el-form
        ref="temp2"
        :rules="rules"
        :model="temp2"
        label-position="left"
        label-width="120px"
        style="width: 550px; margin-left:50px;"
        class="demo-dynamic"
        :inline="true"
      >
        <el-form-item
          label="开户人姓名"
          prop=""
        >
          <el-input
            v-model="temp2.openName"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item
          label="身份证号码"
          prop=""
        >
          <el-input
            v-model="temp2.idCardNum"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          label="银行卡号码"
          prop=""
        >
          <el-input
            v-model="temp2.cardNum"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          label="可提现金额"
          prop=""
        >
          <el-input
            v-model="currentMoney"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          label="提现金额"
          prop="money"
        >
          <el-input
            v-model="temp2.money"
            clearable
            style="width:170px"
          />
        </el-form-item>

        <el-form-item
          label="提现密码"
          prop="payPassword"
        >
          <el-input
            v-model="temp2.payPassword"
            clearable
            show-password
            style="width:170px"
          />
        </el-form-item>

        <el-form-item
          label="验证码"
          prop="code"
        >
          <el-input
            v-model="temp2.code"
            clearable
            style="width:170px"
          />
          <el-button
            type="primary"
            size="mini"
            @click="getCode()"
          >获取验证码
          </el-button>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormMoneyTX = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="getMoney()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import {
    addBankCard,
    bankCardList,
    getPhoneCode,
    agentGetMoney,
    unBindBankCard,
    transferWallet,
    getSupplyAll,
    getallAgent,
    walletTradeList
  } from '@/api/v1'
  import {getInfo, resetOwnerPassword, resetAgentPassword} from '@/api/user'

  import waves from '@/directive/waves' // Waves directive
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {parseTime} from '@/utils'
  import {MessageBox, Message} from 'element-ui'

  export default {
    directives: {waves},
    components: {Pagination},
    filters: {
      roleFilter(role) {
        switch (role) {
          case 1:
            return '代理'
          case 2:
            return '商户'
          case 3:
            return '司机'
          case 5:
            return '超级管理员'
        }
      },
      walletTradeFilter(status) {
        switch (status) {
          case 1:
            return '+'
          case 2:
            return '-'
          case 3:
            return '+'
          case 4:
            return '*'
          case 5:
            return '-'
          case 6:
            return '+'
        }
      }
    },
    data() {
      return {
        total: 0,
        tableData: [],
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '新增'
        },
        transBtn: false,
        allAgent: [],
        walletDate: [],
        supply: [],
        activeName: 'first',
        name: '',
        phone: '',
        currentMoney: '',
        listQuery: {
          page: 1,
          limit: 20,
          sort: '+id',
          relationId: '',
          relationType: ''
        },
        key: 1, // table key
        walletkey: 1, // table key
        dialogFormVisible: false,
        dialogFormMoney: false,
        dialogFormMoneyTX: false,
        ruleForm: {
          oldPassword: '',
          newPassword: '',
          newPassword2: ''
        },
        payForm: {
          oldPassword: '',
          newPassword: '',
          newPassword2: ''
        },
        info: {},
        rules: {
          oldPassword: [
            {required: true, message: '请输入当前密码', trigger: 'blur'}
          ],
          newPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
          ],
          newPassword2: [
            {required: true, message: '请再次输入新密码', trigger: 'blur'}
          ],
          oilSupplyId: [
            {required: true, message: '请选择您要转帐的商户', trigger: 'change'}
          ],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}],
          money: [{required: true, message: '请输入金额', trigger: 'blur'}]
        },
        temp: {
          cardNum: '',
          openName: '',
          idCardNum: '',
          relationId: '', // 省代或油卡商户id–超管添加必传
          relationType: '' // 类型1为省代，2为油卡商户–超管添加必传
        },
        temp1: {
          oilSupplyId: '',
          money: '',
          password: ''
        },
        temp2: {
          cardNum: '',
          openName: '',
          idCardNum: '',
          relationId: '', // 省代或油卡商户id–超管添加必传
          relationType: '', // 类型1为省代，2为油卡商户–超管添加必传
          money: ''
        },
        isAgentSub: false
      }
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        )
        this.key = this.key + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
        this.walletkey = this.walletkey + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },

    created() {
      // this.getList();
      this.detail();
      // this.getWalletTradeList();
    },
    methods: {
      handleGetMoney(row) {
        this.temp2 = Object.assign({}, row) // copy obj
        console.log(row)
        console.log(this.temp2)
        this.dialogFormMoneyTX = true
        this.$nextTick(() => {
          this.$refs['temp2'].clearValidate()
        })
      },
      getMoney(row) {
        console.log(this.temp2)
        this.temp2.bankCardId = this.temp2.id
        this.$refs['temp2'].validate(valid => {
          if (valid) {
            agentGetMoney(this.temp2).then(res => {
              this.dialogFormMoneyTX = false
              Message({
                message: res.msg || 'success',
                type: 'success',
                duration: 2 * 1000
              })
            })
          }
        })
      },
      getCode() {
        var query = {phone: this.info.phone}
        getPhoneCode(query).then(res => {
          Message({
            message: res.msg || 'success',
            type: 'success',
            duration: 2 * 1000
          })
        })
      },
      delBankCard(row) {
        this.$confirm('此操作将删除该银行卡, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            unBindBankCard(row).then(res => {
              Message({
                message: res.msg || 'success',
                type: 'success',
                duration: 2 * 1000
              })
              this.getList()
            })
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });
          })
      },
      resetTemp() {
        this.temp.cardNum = ''
        this.temp.openName = ''
        this.temp.idCardNum = ''
      },
      createData() {
        this.$refs['temp'].validate(valid => {
          if (valid) {
            console.log(this.temp)
            addBankCard(this.temp).then(res => {
              // this.list.unshift(this.temp);
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
          }
        })
      },
      getList() {
        this.listLoading = true
        bankCardList(this.listQuery).then(res => {
          this.tableData = res.data.records
          //          this.total = Number(res.data.total);
          console.log(this.tableData)
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      handleCreate() {
        this.resetTemp()
        console.log(this.temp)
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['temp'].clearValidate()
        })
      },
      getList2() {
        this.listLoading = true
        getallAgent(this.listQuery).then(res => {
          this.allAgent = res.data
          console.log(this.allAgent)
        })
      },
      supplyList() {
        const data = {
          agentId: this.info.id
        }
        getSupplyAll(data).then(res => {
          console.log(res)
          this.supply = res.data
        })
      },
      getWalletTradeList() {
        walletTradeList(this.listQuery).then(res => {
          this.walletDate = res.data.data.records
          this.total = Number(res.data.data.total)
          //          setTimeout(() => {
          //            this.listLoading = false
          //          }, 1.5 * 1000)
          //          console.log(res)
        })
      },
      handleTrans(row) {
        console.log(this.temp1)
        this.dialogFormMoney = true
        this.$nextTick(() => {
          this.$refs['temp1'].clearValidate()
        })
      },
      trans() {
        this.$refs['temp1'].validate(valid => {
          if (valid) {
            transferWallet(this.temp1).then(res => {
              this.dialogFormMoney = false
              console.log(res)
              this.$notify({
                title: '消息',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
              this.getWalletTradeList();
            })
          }
        })
      },
      detail() {
        getInfo().then(res => {
          console.log(res)
          if (res.data.agent) {
            this.currentMoney = res.data.wallet.currentMoney
            this.info = res.data.agent
          } else {
            this.info = res.data.user
          }
          if (this.info.role == 1) {
            // 省代显示转账按钮
            // this.supplyList()
            // this.transBtn = true
            // this.isAgentSub = true;
            // if (res.data.user.type == 1) {
            //   this.isAgentSub = false;
            // }
          } else {
            this.transBtn = false
          }
        })
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      cleanrRuleform(){
        this.ruleForm.oldPassword=''
        this.ruleForm.newPassword=''
        this.ruleForm.newPassword2=''
      },
      onSubmit(formName) {
        console.log('submit!')
        if (this.ruleForm.newPassword !== this.ruleForm.newPassword2) {
          this.$message.error('两次密码输入不一致！')
          return
        }
        this.$refs[formName].validate(valid => {
          console.log(this.ruleForm)
          if (valid) {
            resetOwnerPassword(this.ruleForm).then(res => {
              console.log(res)
              this.cleanrRuleform();
              this.$notify({
                title: '消息',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      onSubmit2(formName) {
        console.log('submit22!')
        if (this.payForm.newPassword !== this.payForm.newPassword2) {
          this.$message.error('两次密码输入不一致！')
          return
        }
        this.$refs[formName].validate(valid => {
          console.log(this.payForm)
          if (valid) {
            resetAgentPassword(this.payForm).then(res => {
              console.log(res)
              this.$notify({
                title: '消息',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      }
    }
  }
</script>
<style>
  .el-row {
    margin: 20px;
  }
</style>

